<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>

  <body>
    <div id="xiaoming">
      <!-- <h1 v-if="flag==1" v-bind:title="message">{{name}}今年{{age+num}}岁</h1>
      <h2 v-else if="">我是h2</h2>
      <ul>
        <li v-for="(v,i) in lists">{{v}}</li>
      </ul> -->
      <button v-on:click="fun">点击我</button>
      <button @click="fun">点击我</button>
      <p>{{message}}</p>
      <input v-model="message" />
      <ul>
        <suibian
          v-for="item in lists"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></suibian>
      </ul>
      <div
        v-on:scroll="fun1"
        style="
          width: 300px;
          height: 300px;
          border: 1px solid #ccc;
          overflow: auto;
        "
      >
        1
        <div
          @click="fun2"
          style="width: 800px; height: 800px; border: 1px solid #ccc"
        >
          2
          <div
            @click="fun3"
            style="width: 100px; height: 100px; border: 1px solid #ccc"
          >
            3
          </div>
        </div>
      </div>
      <input v-model.number="age" type="number" />
      <input type="radio" v-model="picked" value="a" />
      <input type="radio" v-model="picked" value="b" />
      <input type="radio" v-model="picked" value="c" />
      <select v-model="selected">
        <option value="1">ABC1</option>
        <option value="2">ABC2</option>
        <option value="3">ABC3</option>
      </select>
    </div>
    <!-- <div id="xiaozhang">
      <h1 :title="message">{{name}}今年{{age+num}}岁</h1>
    </div> -->
  </body>
  <script>
    Vue.component('suibian', {
      props: ['todo'],
      template:
        '<li style="color:red;">我叫：{{todo.username}} 年龄：{{todo.age}} 性别：{{todo.sex==1?"女":"男"}}</li>',
    })
    Vue.component('suibian', {
      props: ['todo'],
      template:
        '<li style="color:red;">我叫：{{todo.username}} 年龄：{{todo.age}} 性别：{{todo.sex==1?"女":"男"}}</li>',
    })
    Vue.component('suibian', {
      props: ['todo'],
      template:
        '<li style="color:red;">我叫：{{todo.username}} 年龄：{{todo.age}} 性别：{{todo.sex==1?"女":"男"}}</li>',
    })
    var app = new Vue({
      el: '#xiaoming',
      data: {
        selected: '2',
        picked: 'a',
        flag: 123,
        message: '12345678',
        name: '小明',
        age: 99,
        num: 8,
        lists: [
          {
            username: '高洁',
            age: 18,
            sex: 1,
          },
          {
            username: '高赛',
            age: 19,
            sex: 2,
          },
          {
            username: '亚非',
            age: 14,
            sex: 1,
          },
        ],
      },
      methods: {
        fun: function () {
          this.message = this.message.split('').reverse().join('')
          //   console.log(this.name)
        },
        fun1() {
          console.log(Vue.config.keyCodes)
        },
        fun2() {
          console.log(2)
        },
        fun3() {
          console.log(3)
        },
      },
    })

    // var app2 = new Vue({
    //   el: '#xiaozhang',
    //   data: {
    //     message: '高桑',
    //     name: '小张',
    //     age: 99,
    //     num: 8,
    //   },
    // })
  </script>
</html>
